<template>
	<div>
		<div class="wel__header">
			<div class="wel__info">
				<el-tag effect="plain" style="font-size: 26px;padding: 6px;height:auto">{{current}}</el-tag>
			</div>
			<div class="wel__extra">
				<div class="wel__extra-item">
					<p class="wel__extra-title">
						仓库数
					</p>
					<p class="wel__extra-subtitle">
						<avue-count-up style="font-size:30px;color:black;" :end="sum.warehouse"></avue-count-up>
					</p>
				</div>
				<div class="wel__extra-item">
					<p class="wel__extra-title">
						库位数
					</p>
					<p class="wel__extra-subtitle">
						<avue-count-up style="font-size:30px;color:black;" :end="sum.location"></avue-count-up>
					</p>
				</div>
				<div class="wel__extra-item">
					<p class="wel__extra-title">
						库存数
					</p>
					<p class="wel__extra-subtitle">
						<avue-count-up style="font-size:30px;color:black;" :end="sum.inventory"></avue-count-up>
					</p>
				</div>
			</div>
		</div>
		<basic-container>
			<avue-data-box :option="option1"></avue-data-box>
		</basic-container>
		<basic-container>
			<el-row :gutter="6">
				<el-col :span="16">
					<ve-line ref="chart1" height="400px" :data="chartData1" :extend="extend"></ve-line>
				</el-col>
				<el-col :span="8">
					<ve-bar ref="chart2" height="400px" :settings="chartSettings2" :data="chartData2" :extend="extend"></ve-bar>
				</el-col>
			</el-row>
		</basic-container>
	</div>
</template>

<script>
	import request from '@/router/axios';
	import VeBar from 'v-charts/lib/bar.common';
	import VeLine from 'v-charts/lib/line.common';
	import {
		mapGetters
	} from "vuex";

	export default {
		components: {
			VeBar,
			VeLine
		},
		name: "wel",
		data() {
			this.chartSettings2 = {
				metrics: ['订单数'],
				dataOrder: {
					label: '订单数',
					order: 'desc'
				}
			}
			return {
				sum: {
					warehouse: 0,
					location: 0,
					inventory: 0
				},
				current: '',
				extend: {
					series: {
						label: {
							show: true,
							position: 'top'
						}
					},
					xAxis: {
						axisLabel: {
							interval: 0,
							rotate: 40
						}
					},
					yAxis: {
						axisLabel: {
							interval: 0,
							rotate: 30,
							//show: false
						}
					}
				},
				chartData1: {
					columns: ['类别', '上架数', '下架数'],
					rows: []
				},
				chartData2: {
					columns: ['类别', '订单数'],
					rows: []
				},
				option1: {
					span: 6,
					data: [{
							title: '待入库',
							count: 0,
							icon: "el-icon-data-board",
							color: "rgb(49, 180, 141)",
							href: "#",
							target: "_blank"
						},
						{
							title: '待拣货',
							count: 0,
							icon: "el-icon-shopping-cart-full",
							color: "rgb(56, 161, 242)",
							href: "#",
							target: "_blank"
						},
						{
							title: '待移库',
							count: 0,
							icon: "el-icon-document-copy",
							color: "rgb(117, 56, 199)",
							href: "#",
							target: "_blank"
						},
						{
							title: '待盘点',
							count: 0,
							icon: "el-icon-finished",
							color: "#515a6e",
							href: "#",
							target: "_blank"
						}
					]
				}
			};
		},
		computed: {
			...mapGetters(["userInfo"])
		},
		created() {
			request({
				url: '/api/SysTenant/currents'
			}).then(res => {
				this.deptList = res.data.data;
				this.current = this.deptList.find(x => x.code === this.userInfo.tenantCurr).name;
			});
			request({
				url: '2/api/WmsStorage/sum'
			}).then(res => {
				this.sum.warehouse = res.data.data;
			});
			request({
				url: '2/api/WmsLocation/sum'
			}).then(res => {
				this.sum.location = res.data.data;
			});
			request({
				url: '2/api/WmsInventory/sum'
			}).then(res => {
				this.sum.inventory = res.data.data;
			});
			request({
				url: '2/api/WmsLog/sum'
			}).then(res => {
				res.data.data.forEach(m => {
					this.chartData1.rows.push({
						'类别': m.createdBy,
						'上架数': m.upQuan,
						'下架数': m.inQuan
					})
				})
			});
			request({
				url: '2/api/OrderOutDetail/sum'
			}).then(res => {
				res.data.data.forEach(m => {
					this.chartData2.rows.push({
						'类别': m.barCode,
						'订单数': m.quantity
					})
				})
			});
			request({ //待入库
				url: '2/api/WmsInStorDetail/sum'
			}).then(res => {
				this.option1.data[0].count = res.data.data;
			});
		},
		methods: {}
	};
</script>

<style scoped="scoped" lang="scss">
	.wel {
		&__header {
			padding: 25px 40px;
			border-bottom: 1px solid #e8e8e8;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&__info {
			display: flex;
			align-items: center;

			&-img {
				border-radius: 72px;
				display: block;
				width: 72px;
				height: 72px;

				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			&-content {
				position: relative;
				margin-left: 24px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}

			&-title {
				font-size: 20px;
				line-height: 28px;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 12px;
			}

			&-subtitle {
				position: relative;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}
		}

		&__extra {
			&-item {
				position: relative;
				padding: 0 32px;
				display: inline-block;

				&:last-child {
					&::after {
						display: none;
					}
				}

				&:after {
					background-color: #e8e8e8;
					position: absolute;
					top: 30px;
					right: 0;
					width: 1px;
					height: 40px;
					content: "";
				}
			}

			&-title {
				color: rgba(0, 0, 0, 0.45);
				font-size: 14px;
				line-height: 22px;
				margin-bottom: 4px;
			}

			&-subtitle {
				color: rgba(0, 0, 0, 0.85);
				font-size: 30px;
				line-height: 38px;
				margin: 0;

				span {
					color: rgba(0, 0, 0, 0.45);
					font-size: 20px;
				}
			}
		}
	}
</style>
